<div class="main-content">
  <div class="categories">
    <ul>
      <li (click)="changeSubCategory()" [class.checked]="!searchParams.subcategory">全部</li>
      <li *ngFor="let item of categoryInfo?.subcategories" (click)="changeSubCategory(item)"
        [class.checked]="item.code === searchParams.subcategory">{{item.displayValue}}</li>
    </ul>
  </div>
  <div class="conditions">
    <ng-container *ngFor="let row of categoryInfo?.metadata">
      <div class="row" *ngIf="showMetaRow(row.name)">
        <b class="title">{{ row.displayName }}</b>
        <ul class="tabs">
          <li class="tag" (click)="changeMeta(row, item)" *ngFor="let item of row.metaValues;">{{ item.displayName }}</li>
        </ul>
      </div>
    </ng-container>
    <div class="row checked-conditions" *ngIf="checkedMetas.length">
      <b class="title">已筛选</b>
      <ul class="tabs">
        <li class="tag"  *ngFor="let item of checkedMetas">
          <span class="label-title" (click)="unCheckMeta(item)">{{item.metaRowName}}</span> |
          <span>{{item.metaName}}</span>
        </li>
      </ul>
      <a class="clear" (click)="unCheckMeta('clear')">清除全部</a>
    </div>
  </div>
  <div class="albums">
    <div class="album-head">
      <div class="title">
        <b>{{ albumsInfo?.pageConfig?.h1title }}</b>
      </div>
      <ul class="sort">
        <li
          [class.checked]="i === searchParams.sort"
          *ngFor="let item of sorts; index as i"
          (click)="changeSort(i)">
          {{item}}
        </li>
      </ul>
    </div>
    <div class="album-cards">
      <div class="album-card" [routerLink]="'/album/' + album.albumId" *ngFor="let album of albumsInfo?.albums; trackBy: trackByAlbums">
        <div class="cover">
          <!--    图片地址加上!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290，尺寸就会变为140 * 140      -->
          <img class="thumbnail" [src]="album.coverPath + '!strip=1&quality=7&magick=webp&op_type=3&columns=290&rows=290'" [alt]="[album.title]">
          <img class="icon-play" src="../../../assets/images/icon-play-cover.png" />
          <p class="listen-count">
            <i class="icon iconfont icon-headset"></i>
            <span>{{ album.playCount }}万</span>
          </p>
        </div>
        <div class="abstract">
          <p class="txt title ellipsis">
            <span *ngIf="album.isFinished === 2" class="tag">完本</span>
            <span>{{ album.title }}</span>
          </p>
          <p class="txt author"><span>{{ album.anchorName }}</span></p>
        </div>
      </div>
    </div>
  </div>
</div>
